<template>
  <div class="page" style="">
    <div class="print_title">车辆使用申请详情 · 禾美环保</div>
    <p class="title">基本信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px;">
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >单据编号:</p>
            <p style="margin:0 0 0 6px;">{{ formData.documentNo }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请人:</p>
            <p style="margin:0 0 0 6px;">{{ formData.handlerId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>

      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请部门:</p>
            <p style="margin:0 0 0 6px;">{{ formData.applyDept_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请时间:</p>
            <p style="margin:0 0 0 6px;">{{ formData.createTime }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >管理员:</p>
            <p style="margin:0 0 0 6px;">{{ formData.carAdmin_dictText?formData.carAdmin_dictText:formData.carAdmin }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >费用所属团队:</p>
            <p style="margin:0 0 0 6px;">{{ formData.businessUnit_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请车辆:</p>
            <p style="margin:0 0 0 6px;">{{ formData.carId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >关联项目:</p>
            <p style="margin:0 0 0 6px;">{{ formData.projectId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >是否需要驾驶员:</p>
            <p style="margin:0 0 0 6px;">{{ formData.isDriver_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >预计归还日期:</p>
            <p style="margin:0 0 0 6px;">{{ formData.usingEndTime }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >用车类型:</p>
            <p style="margin:0 0 0 6px;">{{ formData.usingType_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >预定日期:</p>
            <p style="margin:0 0 0 6px;">{{ moment(formData.reserveStartTime).format('YYYY-MM-DD') }} 至 {{ moment(formData.reserveEndTime).format('YYYY-MM-DD') }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12" v-if="formData.isDriver == '1' && formDisabled">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >驾驶员:</p>
            <p style="margin:0 0 0 6px;">{{ formData.driver_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >是否已还车:</p>
            <p style="margin:0 0 0 6px;">{{ formData.isReturnCar_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >还车日期:</p>
            <p style="margin:0 0 0 6px;">{{ formData.returnCarTime }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12" v-if="formDisabled&&!this.formBpm">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >使用公里数:</p>
            <p style="margin:0 0 0 6px;">{{ formData.kilometers }}km</p>
          </a-col>
        </a-row>
      </a-col>

      <a-col :span="24">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >事由:</p>
            <p style="margin:0 0 0 6px;">{{ formData.subjectMatter }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >备注:</p>
            <p style="margin:0 0 0 6px;">{{ formData.remark }}</p>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <!-- 附件信息 -->
    <FileInfor :purchaseFile="purchaseFile" v-if="purchaseFile && purchaseFile.length"></FileInfor>
    <!-- 流程详情 -->
    <ProcessInfor v-if="dataHistorySource && dataHistorySource.length" :dataHistorySource="dataHistorySource"></ProcessInfor>
  </div>
</template>
<script>
import { getAction } from '@/api/manage'
import moment from 'moment';
import FileInfor from '@/components/print/FileInfor.vue' // 审批历史流程列表组件
  import ProcessInfor from '@/components/print/ProcessInfor.vue' // 审批历史流程列表组件
    export default {
      props: {
				formData: {
					type: Object,
					default: () => {},
					required: true
				},
				formDataHistory: {
					type: Object,
					default: () => {},
					required: true
        },
				formDisabled: {
					type: Boolean,
					default: false,
					required: false
				},
				formBpm: {
					type: Boolean,
					default: false,
					required: false
				}
      },
      components: {
      FileInfor,
      ProcessInfor
    },
      data() {
        return {
					moment,
					dataHistorySource: [], // 流程列表
					columnsHistory: [
						{
							title: '序号',
							rowKey: (record, index) => index,
							width: 45,
							align: 'center',
							customRender(t, r, index) {
								return parseInt(index) + 1
							}
						},
						{
								title: '名称',
								align: 'center',
								width: 65,
								dataIndex: 'name'
						}, {
								title: '流程实例ID',
								align: 'center',
								width: 80,
								dataIndex: 'processInstanceId'
						}, {
								title: '开始时间',
								align: 'center',
								width: 130,
								dataIndex: 'startTime'
						}, {
								title: '结束时间',
								align: 'center',
								width: 130,
								dataIndex: 'endTime'
						}, {
								title: '负责人',
								align: 'center',
								width: 55,
								dataIndex: 'assigneeName'
						}, {
								title: '处理结果',
								width: 65,
								align: 'center',
								dataIndex: 'deleteReason'
						}, {
								title: '处理意见',
								align: 'center',
								dataIndex: 'remarks'
						}
					],
                url: {
                    historyList: '/api/erpmng/act/task/processHistoryList' // 流程历史跟踪接口
                },
                purchaseFile: [] // 附件
        };
      },
        watch: {
            formData: {
                handler (val) {
                    if (val) {
                        this.getHistoryList()
                        if (val.fileInfo) {
                            this.purchaseFile = val.fileInfo.split(',')
                        }
                    }
                },
                immediate: true
            },
            formDataHistory: {
              
                handler (val) {
                  console.log('-------formDataHistory', val)
                    if (val) {
                        this.getHistoryList()
                    }
                },
                immediate: true
            }
        },
        methods: {
					// 获取列表
					getHistoryList() {
						var params = { processInstanceId: this.formDataHistory.procInsId };// 查询条件
						getAction(this.url.historyList, params).then(res => {
              console.log('------res', res)
								if (res.success) {
										this.dataHistorySource = res.result.records || res.result
								}
						})
					},

          tableRowClass(record, index) {
						return 'rowClass';
					}
        }
    };
    </script>
    <style lang="less" scoped>
    .page{
        background: #ffffff;
        padding: 19px 28px 0 28px;
        width: 750px;
        .print_title{
            font-size: 15px;
            font-family: Alibaba PuHuiTi 2.0;
            font-weight: normal;
            color: #000000;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 9px;
        }
        .title {
            background: #EEEEEE;
            font-size: 13px;
            font-family: Alibaba PuHuiTi 2.0;
            font-weight: normal;
            color: #000000;
            padding: 11px 9px;
        }
				.content {
          font-size: 13px;
      	}
        .title_table{
            font-size: 13px;
            font-family: Alibaba PuHuiTi 2.0;
            font-weight: normal;
            color: #000000;
        }
    }
    /deep/ .rowClass{
        font-size: 10px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
    }
    /deep/ .ant-table-thead th{
        font-size: 10px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
    }
    /deep/ .ant-table-thead tr{
        background: #EEEEEE;
    }
    /deep/ .ant-table-small > .ant-table-content > .ant-table-body {
        margin: 0 0px;
    }
    /deep/ .ant-table-body tr {
        font-size: 10px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
    }
    /deep/ .ant-table-body tr td {
    word-wrap:break-word;
    word-break:break-all;
  }
    .content {
      font-size: 13px;
    }
    </style>
